<template>
  <div class="user">
    <van-row>
      <van-col span="6" @click="showPopup"
        ><img :src="avatarSrc" alt=""
      /></van-col>
      <van-col span="12" @click="showPopup">{{ userNickname }}</van-col>
      <van-col span="6" @click="showPopup"
        ><van-icon :name="loginIcon" @click="ShowDialog"
      /></van-col>
    </van-row>
    <van-grid :column-num="3">
      <van-grid-item
        v-for="value in 8"
        :key="value"
        icon="photo-o"
        text="文字"
      />
    </van-grid>
    <!-- 点击登录弹出层 -->
    <van-popup v-model="show">
      <van-form @submit="onSubmit">
        <van-field
          v-model="username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px">
          <van-button round block color="darkred" native-type="submit"
            >提交</van-button
          >
        </div>
      </van-form>
    </van-popup>
  </div>
</template>

<script>
import { UserLogin } from "@/request/api"
import { Dialog } from "vant"
import avatarSrc from "../assets/avatar.png"
import { mapState, mapMutations} from "vuex"
export default {
  data() {
    return {
      avatarSrc,
      show: false,
      username: "",
      password: "",
      userNickname: "立即登陆",
      loginIcon: "arrow",
    };
  },
  computed:{
    ...mapState({
      //这里是直接拿 isGoback是false
      isGoback:state=>state.isGoback.isGoback
    })
  },
  created() {
    //登陆成功之后，页面一刷新，头像和昵称就没有了
    let userInfo = localStorage.getItem("userInfo");
    // console.log(userInfo)
    if (userInfo) {
      userInfo = JSON.parse(userInfo);
      this.avatarSrc = userInfo.avatar;
      this.userNickname = userInfo.nickname;
      this.loginIcon = "cross";
    }
  },
  mounted() {},
  methods: {
    ...mapMutations({
      changeIsGoback:'isGoback/changeIsGoback'
    }),
    ShowDialog() {
      let token = localStorage.getItem("token");
      if (!token) {
        return;
      } else {
        Dialog.confirm({
          title: "标题",
          message: "确认退出登录?",
        })
          .then(() => {
            // on confirm
            //退出登录操作
            //1.提示用户退出成功
            this.$toast("退出登录成功!");
            //2.删除token值和userInfo
            localStorage.removeItem("token");
            localStorage.removeItem("userInfo");
            //3.修改页面信息，头像，用户昵称等，还原
            this.avatarSrc = avatarSrc;
            (this.userNickname = "立即登陆"), (this.loginIcon = "arrow");
          })
          .catch(() => {
            // on cancel
          });
      }
    },
    showPopup() {
      //先判断有没有登陆
      let token = localStorage.getItem("token");
      if (token) {
        return;
      }
      this.show = true;
    },
    onSubmit(values) {
      let username = values["用户名"];
      let pwd = values["密码"];
      //另一种写法
      // username: values.用户名,
      // pwd: values.密码,
      let _this = this;
      UserLogin({
        username,
        pwd,
      }).then((res) => {
        console.log("我要的", res);
        //登陆成功，需要做的事
        //1.提示用户登陆成功
        _this.$toast.success("登陆成功!");
        //2.保存token值，和用户的基本信息到本地存储
        localStorage.setItem("token", res.data.token);
        localStorage.setItem("userInfo",JSON.stringify(res.data.userInfo));

        setTimeout(() => {
          //3.关闭登陆窗口
          _this.show = false;
          //4.修改页面上的用户头像，用户昵称等
          _this.avatarSrc = res.data.userInfo.avatar;
          _this.userNickname = res.data.userInfo.nickname;
          _this.loginIcon = "cross";
          
          //5.跳转到原来的页面，但用户主动登陆，就应该停留在/user
          //这需要可以利用vueX来改,因为这个值isGoback在不同的页面是不一样的
          console.log(this.isGoback);
          if(this.isGoback){
            this.changeIsGoback(false)
            this.$router.go(-1)
          }
        }, 800);

        //5.修改
      });
    },
  },
};
</script>

<style scoped lang="less">
.van-row {
  background-color: #333;
  color: #fff;
  padding: 0.2rem;
  .van-col {
    line-height: 0.7rem;
    img {
      width: 0.7rem;
      border-radius: 50%;
      display: block;
    }
    &:last-child {
      text-align: right;
    }
  }
}
.van-popup {
  width: 80%;
}
// 深度修改样式 当加important都没有用时
/deep/.van-grid-item__content {
  padding: 0.3rem 0.08rem;
}
</style>
